<template>
	<div class="tab-box">
		<div class="tab-item" :class="C_TabSwitch(2)" @click="switchTab(2)">
			全部<span class="num">{{ props.statusData.allNum }}</span>
		</div>
		<div class="tab-item" :class="C_TabSwitch(1)" @click="switchTab(1)">
			在线<span class="num">{{ props.statusData.onlineNum }}</span>
		</div>
		<div class="tab-item" :class="C_TabSwitch(0)" @click="switchTab(0)">
			离线<span class="num">{{ props.statusData.offNum }}</span>
		</div>
	</div>
</template>

<script setup lang="ts" name="GlobalSwitchTab">
type TsProps = {
	statusData: Record<string, string>;
};
const props = withDefaults(defineProps<TsProps>(), {
	statusData: () => ({})
});

const emits = defineEmits<{
	(e: 'switchTab', tabSign: number | null): void;
}>();

// 头部tab切换栏的默认值
const tabSignDefault = ref<number | null>(2);

// 全部/在/离线的状态样式
const C_TabSwitch = computed(() => {
	return function name(tabSign: number) {
		return tabSignDefault.value === tabSign ? 'current' : '';
	};
});

// 切换状态查看
const switchTab = (tabSign: number | null): void => {
	tabSignDefault.value = tabSign;
	if (tabSign === 2) {
		tabSign = null;
	}
	emits('switchTab', tabSign);
};

// 盒子状态获取
// const queryStatusList = async (): Promise<void> => {
// 	let { data } = await BoxApi.queryStatusList();
// 	allNum.value = data.total;
// 	onlineNum.value = data.online;
// 	offNum.value = data.offline;
// };
onMounted(() => {
	// queryStatusList();
});
</script>

<style lang="less">
.tab-box {
	position: relative;
	display: flex;
	width: 320px;
	height: 36px;
	border: 1px solid @mask02;
	border-radius: 6px;
	line-height: 28px;
	color: @text02;
	background: @mask01;
	justify-content: space-between;

	.tab-item {
		position: relative;
		margin: 3px;
		text-align: center;
		cursor: pointer;
		flex: 1;

		.num {
			display: inline-block;
			margin-left: 10px;
			color: @text03;
		}
	}

	.tab-item::after {
		position: absolute;
		top: 4px;
		right: -5px;
		width: 1px;
		height: 20px;
		margin-right: 1px;
		background: @mask02;
		content: '';
	}

	.tab-item:last-child::after {
		position: absolute;
		top: 0;
		right: 0;
		width: 0;
		height: 20px;
		margin-right: 1px;
		background: @mask02;
		content: '';
	}

	.current {
		border-radius: 4px;
		font-weight: 700;
		color: @text01;
		background: @primary01;
		box-shadow: @shadowM;

		.num {
			font-weight: 400;
		}
	}
}
</style>
